<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .box{
        width: 800px;
        height: 200px;
        background: red;
        margin: 30px 0;
    }
    .con{
        /* - overflow值不为 visible，为 auto、scroll、hidden的时候形成bfc */
        overflow: auto;
        /* display: inline-block; */
    }

    .left{
      width: 200px;
      height: 200px;
      background:green;
      float: left;
    }
    .right{
       width: 300px;
       height: 300px;
       background: pink;
       overflow: hidden;
    }
    .ul{
        /* overflow: hidden; */
       
    }
    .ul li{
        width: 100px;
        height: 100px;
        background: skyblue;
        float: left;
       
    }
    .box2{
        width: 800px;
        height: 200px;
        background: sandybrown;
        /* clear: both;  清除浮动 */
        overflow: hidden;
    }
</style>
<body>
    <!-- 形成一个bfc -->
    <div class="con">
        <!-- 形成一个bfc  bfc可以嵌套bfc -->  
       <div class="con">
        <div class="box"></div>
       </div>
       
        <div class="box"></div>
    </div>
    <!-- 形成一个bfc -->
    <div class="con">
        <div class="box"></div>
    </div>


    <div class="box_fl">
       <div class="left"></div>
        <!-- 形成一个bfc -->
       <div class="right"></div>
    </div>
    <!-- 或者  让ul形成bfc -->
    <ul class="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
     <!-- 形成一个bfc -->
    <div class="box2"></div>
</body>

</html>